<template>
  <div class="box">
    <div class="box-title">干燥剂信息</div>
    <div
      class="box-table"
      :style="{ height: (tableData.length + 1) * 40 + 'px' }"
    >
      <hcTable
        :table-data="tableData"
        :options="tableOptions"
        :columns="tableColumn"
      >
        <template #position="{ row }">
          {{ row.position == "0" ? "正面" : "反面" }}
        </template>
        <template #place="{ row }">
          {{ row.place == "0" ? "正常摆放" : "交替摆放" }}
        </template>
      </hcTable>
    </div>
  </div>
</template>
<script setup>
defineProps({
  tableData: {
    type: Array,
    default: () => [],
  },
});

let tableOptions = {
  showPagination: false,
  border: true,
};

let tableColumn = [
  { label: "料号", prop: "code" },
  // { label: "物料描述", prop: "description" },
  // { label: "长度", prop: "length" },
  // { label: "宽度", prop: "width" },
  { label: "放置位置", prop: "position", slot: "position" },
  { label: "摆放类型", prop: "desiccantPlaceMethod", slot: "place" },
  { label: "坐标X", prop: "x" },
  { label: "坐标Y", prop: "y" },
  { label: "旋转角度", prop: "angle" },
  { label: "坐标X1", prop: "x1" },
  { label: "坐标Y1", prop: "y1" },
  { label: "重量", prop: "weight" },
  { label: "干燥剂规格", prop: "desiccantType" },
  { label: "颜色", prop: "desiccantColor" },
  { label: "色高", prop: "desiccantColorHeight" },
];
</script>
<style scoped lang="scss">
.box {
  width: 100%;
  .box-title {
    height: 30px;
    line-height: 30px;
    width: 100%;
    text-align: center;
  }
  .box-table {
    display: flex;
    height: 100%;
    font-size: 14px;
  }
}
</style>
